<template>
  <v-container fluid class="px-0 mt-1">
    <div class="d-flex justify-space-between">
      <span>推荐博主</span>
      <v-btn
          icon
          small
          class="grey--text"
      >
        <v-icon>mdi-dots-horizontal</v-icon>
      </v-btn>
    </div>
    <v-divider/>
    <v-list dense>
      <v-list-item-group
          color="primary"
      >

        <v-list-item
            v-for="recommendBlogAuthor in recommendBlogAuthors"
            :key="recommendBlogAuthor.id"
            class="pl-2 mb-2"
        >
          <v-btn
              absolute
              icon
              dark
              class="green add"
              width="20"
              height="20">
            <v-icon>mdi-plus</v-icon>
          </v-btn>
          <v-list-item-avatar>
            <v-img :src="recommendBlogAuthor.headPic"></v-img>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title class="font-weight-black" v-text="recommendBlogAuthor.nickname"></v-list-item-title>
            <v-list-item-subtitle v-html="recommendBlogAuthor.signature"></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-container>
</template>

<script>
export default {
  name: "RecommendBlogAuthor",
  data() {
    return {
      recommendBlogAuthors: []
    }
  },
  created() {
    this.recommendBlogAuthors = [

      {

        id: 1,

        nickname: '世界充满爱',

        headPic: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',

        signature: '唤醒財富的21种方法'

      },

      {

        id: 2,

        nickname: '木西Liz',

        headPic: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',

        signature: '一个有趣的动漫游戏全职主播'

      },

      {

        id: 3,

        nickname: '小梦学姐呀',

        headPic: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',

        signature: '名士才情，英雄肝胆，圣贤学问，仙佛心肠，写经世致用之文，夺造化之功，修身、齐家、治国、平天下。'

      },

      {

        id: 4,

        nickname: '性感悍匪小鸡仔',

        headPic: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',

        signature: '眼泪，明明在成为吸血鬼之后再也没有流过的……'

      },

      {

        id: 5,

        nickname: '会特效的特同学',

        headPic: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',

        signature: '圆梦厦大'

      },

    ]
  }
}
</script>

<style lang="less" scoped>
  .add {
    z-index: 999;
    top: 36px;
    left: 18px;
  }
</style>
